<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta name="Content-Type" content="text/html; charset=UTF-8" />
<title>File: INDENTED_SYNTAX</title>
<link rel="stylesheet" href="style.css" tppabs="http://sass-lang.com/docs/yardoc/css/style.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="common.css" tppabs="http://sass-lang.com/docs/yardoc/css/common.css" type="text/css" media="screen" charset="utf-8" />

<script type="text/javascript" charset="utf-8">
  relpath = '';
  if (relpath != '') relpath += '/';
</script>
<script type="text/javascript" charset="utf-8" src="jquery.js" tppabs="http://sass-lang.com/docs/yardoc/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="app.js" tppabs="http://sass-lang.com/docs/yardoc/js/app.js"></script>

  </head>
  <body>
    <script type="text/javascript" charset="utf-8">
      if (window.top.frames.main) document.body.className = 'frames';
    </script>
    
    <div id="header">
      <div id="menu">
  
    <a href="_index.html" tppabs="http://sass-lang.com/docs/yardoc/_index.html" title="Index">Index</a> &raquo; 
    <span class="title">File: INDENTED_SYNTAX</span>
  
  
  <div class="noframes"><span class="title">(</span><a href="..htm" tppabs="http://sass-lang.com/docs/yardoc/." target="_top">no frames</a><span class="title">)</span></div>
</div>

      <div id="search">
  <a id="class_list_link" href="#">Class List</a>
  <a id="method_list_link" href="#">Method List</a>
  <a id ="file_list_link" href="#">File List</a>
</div>

      <div class="clear"></div>
    </div>
    
    <iframe id="search_frame"></iframe>
    
    <div id="content"><div id='filecontents'><h1 id='sass_indented_syntax'>Sass Indented Syntax</h1>
<div class='maruku_toc'><ul style='list-style: none;'><li><a href='#sass_syntax_differences'>Sass Syntax Differences</a></li><li><a href='#property_synax'>Property Synax</a><ul style='list-style: none;'><li><a href='#multiline_selectors'>Multiline Selectors</a></li><li><a href='#comments'>Comments</a></li><li><a href='#id26'><code>@import</code></a></li><li><a href='#mixin_directives'>Mixin Directives</a></li></ul></li><li><a href='#deprecated_syntax'>Deprecated Syntax</a><ul style='list-style: none;'><li><a href='#_for_properties_and_variables'><code>=</code> for Properties and Variables</a></li><li><a href='#_for_default_variables'><code>||=</code> for Default Variables</a></li><li><a href='#_prefix_for_variables'><code>!</code> Prefix for Variables</a></li></ul></li></ul></div>
<p>Sass&#8217;s indented syntax (also known simply as &#8220;Sass&#8221;) is designed to provide a more concise and, for some, more aesthetically appealing alternative to the CSS-based SCSS syntax. It&#8217;s not compatible with CSS; instead of using <code>{</code> and <code>}</code> to delimit blocks of styles, it uses indentation, and instead of using semicolons to separate statements it uses newlines. This usually leads to substantially less text when saying the same thing.</p>

<p>Each statement in Sass, such as property declarations and selectors, must be placed on its own line. In addition, everything that would be within <code>{</code> and <code>}</code> after a statement must be on a new line and indented one level deeper than that statement. For example, this CSS:</p>

<pre class="code">#main {
  color: blue;
  font-size: 0.3em;
}</pre>

<p>would be this Sass:</p>

<pre class="code">#main
  color: blue
  font-size: 0.3em</pre>

<p>Similarly, this SCSS:</p>

<pre class="code">#main {
  color: blue;
  font-size: 0.3em;

  a {
    font: {
      weight: bold;
      family: serif;
    }
    &amp;:hover {
      background-color: #eee;
    }
  }
}</pre>

<p>would be this Sass:</p>

<pre class="code">#main
  color: blue
  font-size: 0.3em

  a
    font:
      weight: bold
      family: serif
    &amp;:hover
      background-color: #eee</pre>

<h2 id='sass_syntax_differences'>Sass Syntax Differences</h2>

<p>In general, most CSS and SCSS syntax works straightforwardly in Sass by using newlines instead of semicolons and indentation instead of braces. However, there are some cases where there are differences or subtleties, which are detailed below.</p>

<h2 id='property_synax'>Property Synax</h2>

<p>The indented syntax supports two ways of declaring CSS properties. The first is just like CSS, except without the semicolon. The second, however, places the colon <em>before</em> the property name. For example:</p>

<pre class="code">#main
  :color blue
  :font-size 0.3em</pre>

<p>By default, both ways may be used. However, the <a href="file.SASS_REFERENCE.html#property_syntax-option" tppabs="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#property_syntax-option" title="&lt;code&gt;:property_syntax&lt;/code&gt; option"><code>:property_syntax</code> option</a> may be used to specify that only one property syntax is allowed.</p>

<h3 id='multiline_selectors'>Multiline Selectors</h3>

<p>Normally in the indented syntax, a single selector must take up a single line. There is one exception, however: selectors can contain newlines as long as they only appear after commas. For example:</p>

<pre class="code">.users #userTab,
.posts #postTab
  width: 100px
  height: 30px</pre>

<h3 id='comments'>Comments</h3>

<p>Like everything else in the indented syntax, comments are line-based. This means that they don&#8217;t work the same way as in SCSS. They must take up an entire line, and they also encompass all text nested beneath them.</p>

<p>Like SCSS, the indented syntax supports two kinds of comments. Comments beginning with <code>/*</code> are preserved in the CSS output, although unlike SCSS they don&#8217;t require a closing <code>*/</code>. Comments beginning with <code>//</code> are removed entirely. For example:</p>

<pre class="code">/* This comment will appear in the CSS output.
  This is nested beneath the comment,
  so it&#39;s part of it
body
  color: black

// This comment will not appear in the CSS output.
  This is nested beneath the comment as well,
  so it also won&#39;t appear
a
  color: green</pre>

<p>is compiled to:</p>

<pre class="code">/* This comment will appear in the CSS output.
 * This is nested beneath the comment,
 * so it&#39;s part of it */
body {
  color: black; }

a {
  color: green; }</pre>

<h3 id='id26'><code>@import</code></h3>

<p>The <code>@import</code> directive in Sass does not require quotes, although they may be used. For example, this SCSS:</p>

<pre class="code">@import &quot;themes/dark&quot;;
@import &quot;font.sass&quot;;</pre>

<p>would be this Sass:</p>

<pre class="code">@import themes/dark
@import font.sass</pre>

<h3 id='mixin_directives'>Mixin Directives</h3>

<p>Sass supports shorthands for the <code>@mixin</code> and <code>@include</code> directives. Instead of writing <code>@mixin</code>, you can use the character <code>=</code>; instead of writing <code>@include</code>, you can use the character <code>+</code>. For example:</p>

<pre class="code">=large-text
  font:
    family: Arial
    size: 20px
    weight: bold
  color: #ff0000

h1
  +large-text</pre>

<p>is the same as:</p>

<pre class="code">@mixin large-text
  font:
    family: Arial
    size: 20px
    weight: bold
  color: #ff0000

h1
  @include large-text</pre>

<h2 id='deprecated_syntax'>Deprecated Syntax</h2>

<p>Since the indented syntax has been around for a while, previous versions have made some syntactic decisions that have since been changed. Some of the old syntax still works, though, so it&#8217;s documented here.</p>

<p><strong>Note that this syntax is not recommended for use in new Sass files</strong>. It will print a warning if it&#8217;s used, and it will be removed in a future version.</p>

<h3 id='_for_properties_and_variables'><code>=</code> for Properties and Variables</h3>

<p><code>=</code> used to be used instead of <code>:</code> when setting variables and when setting properties to SassScript values. It has slightly different semantics than <code>:</code>; see <a href="file.SASS_CHANGELOG.html#3-0-0-sass-script-context" tppabs="http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#3-0-0-sass-script-context" title="this changelog entry">this changelog entry</a> for details.</p>

<h3 id='_for_default_variables'><code>||=</code> for Default Variables</h3>

<p><code>||=</code> used to be used instead of <code>:</code> when setting the default value of a variable. The <code>!default</code> flag was not used. The variable value has the same semantics as <code>=</code>; see <a href="file.SASS_CHANGELOG.html#3-0-0-sass-script-context" tppabs="http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#3-0-0-sass-script-context" title="this changelog entry">this changelog entry</a> for details.</p>

<h3 id='_prefix_for_variables'><code>!</code> Prefix for Variables</h3>

<p><code>!</code> used to be used as the variable prefix instead of <code>$</code>. This had no difference in functionality; it was a purely aesthetic change.</p></div></div>
    
    <div id="footer">
  Generated on Fri Mar  8 20:33:29 2013 by 
  <a href="javascript:if(confirm(%27http://yardoc.org/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://yardoc.org/%27" tppabs="http://yardoc.org/" title="Yay! A Ruby Documentation Tool">yard</a>
  0.5.3 (ruby-1.8.7).
</div>


  <script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  </script>
  <script type="text/javascript">
  try {
  var pageTracker = _gat._getTracker("UA-535380-8");
  pageTracker._trackPageview();
  } catch(err) {}</script>


  </body>
</html>